<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>个人博客 | 注册</title>
        <meta name="keywords" content="HTML5 Template">
        <meta name="description" content="Forum - Responsive HTML5 Template">
        <meta name="author" content="Forum">
        <link rel="shortcut icon" href="favicon/favicon.ico">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="/static/plugins/toast/css/jquery.toast.min.css">

        <link rel="stylesheet" href="/static/front/css/style.css">
        <link rel="stylesheet" href="/static/front/css/main.css">
        <style>
            body{
                background-image: url('/static/images/register.jpg');
                background-size: cover; /* 覆盖整个元素，保持比例 */
                background-position: center; /* 背景图片居中 */
                background-repeat: no-repeat; /* 不重复 */
            }

            .form-group {
                position: relative;
            }

            .password-container {
                display: flex;
                align-items: center;
            }

            .form-control {
                width: 100%;
                padding: 8px;
            }

            .toggle-password {
                background: none;
                border: none;
                cursor: pointer;
                position: absolute;
                right: 0;
                top: 38px;
                /*padding: 8px;*/
            }

            #eyeIcon {
                border: none;
                width: 20px;
                height: 16px;
            }
        </style>

    </head>
    <body>
        <!-- tt-mobile menu -->
        <nav class="panel-menu" id="mobile-menu">
            <ul>

            </ul>
            <div class="mm-navbtn-names">
                <div class="mm-closebtn">
                    Close
                    <div class="tt-icon">
                        <svg>
                            <use xlink:href="#icon-cancel"></use>
                        </svg>
                    </div>
                </div>
                <div class="mm-backbtn">Back</div>
            </div>
        </nav>
        <main id="tt-pageContent" class="tt-offset-none">
            <div class="container">
                <div class="tt-loginpages-wrapper">
                    <div class="tt-loginpages">
                        <a href="/" class="tt-block-title">
                            <img src="/static/front/images/logo.jpeg" class="avatar" alt="">
                            <div class="tt-title">
                                欢迎访问个人博客
                            </div>
                            <div class="tt-description">
                                加入我们，让明天更美好
                            </div>
                        </a>
                        <form class="form-default">
                            <div class="form-group">
                                <label for="userName">用户名</label>
                                <input type="text" name="userName" class="form-control" id="userName">
                            </div>
                            <div class="form-group">
                                <label for="userDisplayName">昵称</label>
                                <input type="text" name="userDisplayName" class="form-control" id="userDisplayName">
                            </div>
                            <div class="form-group">
                                <label for="userEmail">电子邮箱</label>
                                <input type="text" name="userEmail" class="form-control" id="userEmail">
                            </div>
                            <div class="form-group">
                                <label for="userPass">密码</label>
                                <div class="password-container">
                                    <input type="password" name="userPass" class="form-control" id="userPass" placeholder="************">
                                    <button type="button" id="togglePassword" class="toggle-password">
                                        <img src="../../static/images/eye.jpg" alt="显示密码" id="eyeIcon">
                                    </button>
                                    </input>
                                </div>
<!--                                <input type="password" name="userPass" class="form-control" id="userPass">-->
                            </div>
                            <div class="form-group">
                                <a href="#" id="btn-register" class="btn btn-secondary btn-block">注册</a>
                            </div>
                            <p><a href="/login" class="tt-underline">登录</a> | <a href="/forget" class="tt-underline">忘记密码</a></p>
<!--                            <div class="tt-notes">-->
<!--                                By signing up, signing in or continuing, I agree to-->
<!--                                Forum19’s <a href="#" class="tt-underline">Terms of Use</a> and <a href="#"-->
<!--                                                                                                   class="tt-underline">Privacy-->
<!--                                Policy.</a>-->
<!--                            </div>-->
                        </form>
                    </div>
                </div>
            </div>
        </main>
        <script src="/static/front/js/bundle.js"></script>
        <script src="/static/plugins/toast/js/jquery.toast.min.js"></script>

        <script src="/static/js/app.js"></script>
        <script src="/static/js/login.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const togglePassword = document.getElementById('togglePassword');
                const passwordInput = document.getElementById('userPass');
                const eyeIcon = document.getElementById('eyeIcon');

                togglePassword.addEventListener('click', function() {

                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);


                    if (type === 'password') {
                        eyeIcon.src = '../../static/images/eye_icon.jpg';
                    } else {
                        eyeIcon.src = '../../static/images/eye_hidden_icon.jpg';
                    }
                });
            });
        </script>
    </body>
</html>